<template>
  <div class="Home">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="back()"
    />
    <div class="bg"></div>
    <div class="userinfo" v-for="(item, index) in userInfo" :key="index">
      <div class="infobox">
        <div class="tx">头像</div>
        <div class="tximage">
          <div class="logopic">
            <img class="auto" :src="item.userImg" alt="" />
          </div>
        </div>
      </div>
      <div class="infobox">
        <div class="tx">用户id</div>
        <div class="usertext">{{ item.userId }}</div>
      </div>
      <div class="infobox">
        <div class="tx">昵称</div>
        <div class="usertext">
          <input
            type="text"
            v-model="username"
            :placeholder="username"
            @blur="changename"
          />
        </div>
      </div>
      <div class="infobox">
        <div class="tx">简介</div>
        <div class="usertext">
          <input
           
            type="text"
            v-model="userdesc"
            :placeholder="'这家伙很懒,什么都没有留下'"
            @blur="changedesc"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Userinfo",
  data() {
    return {
      isClick: true,
      usernewdesc: "",
      userdesc: "",
      userInfo: "",
      newname: "",
      username: "",
      nulldesc: false,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
    };
  },
  created() {
    this.findAccountInfo();
  },
  methods: {
    descfocus() {
      this.isClick = !this.isClick;
    },
    //修改用户简介
    changedesc() {
      if (this.userdesc == "" ||this.usernewdesc == this.userdesc) {
        return;
      } else {
        let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&desc=${this.userdesc}`;
        this.axios({
          method: "post",
          url: "/updateDesc",
          data: str,
        }).then((res) => {
          console.log(res);
          this.findAccountInfo();
        });
      }
    },
    //修改用户昵称
    changename() {
      if (this.username == this.newname || this.username == "") {
        return;
      } else {
        let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&nickName=${this.username}`;
        this.axios({
          method: "post",
          url: "/updateNickName",
          data: str,
        }).then((res) => {
          console.log(res);
          this.findAccountInfo();
        });
      }
    },
    //返回我的页面
    back() {
      this.$router.push({ name: "Mine" });
    },
    //查询个人资料
    findAccountInfo() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString: this.tokenString,
        },
      }).then((res) => {
        this.usernewdesc = res.data.result[0].desc
        this.userdesc = res.data.result[0].desc
        this.username = res.data.result[0].nickName;
        this.newname = res.data.result[0].nickName;
        this.userInfo = res.data.result;
        if (res.data.result[0].desc == "") {
          this.nulldesc = true;
        } else {
          this.nulldesc = false;
        }
        console.log("这是个人资料==>", res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.userinfo :last-child {
  border: none !important;
}
.infobox {
  border-bottom: 1px solid #ededed;
  height: 60px;
  display: flex;
  .tx {
    font-size: 14px;
    line-height: 60px;
    margin-left: 10px;
  }
  .tximage {
    margin-left: auto;
    margin-top: 10px;
    .logopic img {
      width: 40px;
      height: 40px;
      margin: 5px;
      border-radius: 50%;
      background-size: cover;
      overflow: hidden;
    }
  }
  .usertext {
    font-size: 14px;
    margin-left: auto;
    line-height: 60px;
    margin-right: 10px;
    color: #979ca2;
  }
  .usertext input {
    text-align: right;
    width: 170px;
    height: 40px;
  }
}

.bg {
  height: 150px;
  background-color: blue;
}
.userinfo {
  margin: 0 10px;
  // opacity:0.5;
  //   background: rgba(255, 255, 255, 0.5);
  background-color: #fff;
  height: auto;
  transform: translateY(-50px);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
</style>